<template>
    <div class="textInfo">
        <h3 class="title">{{activeInfo.name}}</h3>
        <p style="font-size:3.5rem;color:#03F90F;height:5rem;line-height:5rem;margin-left:1rem;">{{activeInfo.value}}</p>
        <p class="p_info">
            <span>{{activeInfo.key1}}{{activeInfo.value1}}</span>
            <span>{{activeInfo.key2}}{{activeInfo.value2}}</span>
        </p>
        <p class="p_info" v-if="activeInfo.key3">
            <span>{{activeInfo.key3}}{{activeInfo.value3}}</span>
            <span>{{activeInfo.key4}}{{activeInfo.value4}}</span>
        </p>
    </div>
</template>

<script>
export default {
    props:['pageType'],
    data(){
        return{
            activeInfo:{},
            infoArr:[
                {
                   name:'实况温度',
                   value:'16.1℃',
                   key1:'气压',
                   value1:'1012.4kPa',
                   key2:'地温',
                   value2:'12.1℃',
                   key3:'能见度',
                   value3:'12000m',
                   key4:'湿度',
                   value4:'78%'
                },{
                   name:'实况温度',
                   value:'16.1℃',
                   key1:'气压',
                   value1:'1012.4kPa',
                   key2:'地温',
                   value2:'12.1℃',
                   key3:'能见度',
                   value3:'12000m',
                   key4:'湿度',
                   value4:'78%'
                },{
                   name:'实时2分钟风速',
                   value:'1.2m/s',
                   key1:'风级',
                   value1:'一级',
                   key2:'风向',
                   value2:'东北风',
                   key3:'',
                   value3:'',
                   key4:'',
                   value4:''
                }
            ]
        }
    },
    watch:{
        pageType(newval){
            if(newval=='tem-city'){
                this.activeInfo = infoArr[0]
            }else if(newval=='wind-city'){
                this.activeInfo = infoArr[2]
            }
        }
    },
    methods:{

    },
    created(){
        if(this.pageType=='tem-city'){
            this.activeInfo = this.infoArr[0]
        }else if(this.pageType=='wind-city'){
            this.activeInfo = this.infoArr[2]
        }else if(this.pageType=='tem-county'){
            this.activeInfo = this.infoArr[0]
        }else if(this.pageType=='wind-county'){
            this.activeInfo = this.infoArr[2]
        }
    }
}
</script>

<style lang="scss" scoped>
    .textInfo{
        width:100%;
        height:100%;
        background-image: url('../../../../../static/images/actuallyMonitor/textInfo.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
        .title{
            font-size:1.2rem;
            letter-spacing: .2rem;
            margin: 1rem 0 0 1.5rem;
        }
        p{
            margin-bottom:.7rem;
        }
        .p_info{
            margin:0 0 2rem 2rem;
            display:flex;
            span{
                flex:1;
            }
        }
    }
</style>